<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="app">
        {{msg}} <br>
        <damulovezdy></damulovezdy>
    </div>

    <div id="app2">
        {{msg}} <br>
        <damulovezdy></damulovezdy>
    </div>
</body>
<script src="../../js/vue.js"></script>
<script>

    /*
        template:
              template必须有个包裹的根标签
        data:在子组件中 data不能是一个对象;应该是一个函数;
            函数返回的对象才是该组件真正的数据
        el:
            只能在根组件中使用; 它决定了根组件的模板和挂载节点
    */

    /*
        组件的两个共性:
            要有模板
            要有挂载节点
    */
    //全局组件
    Vue.component("damulovezdy",{
        template:"<div><div>{{msg}}</div> <span>{{msg}}</span></div>",
        data:function () {
            return {
                msg:"达姆 ❤ 周冬雨"
            }
        }
    })
    //根组件app
    new Vue({
        el:"#app",
        //template:"<span>{{msg}}</span>",
        data:{msg:"xxx"}
    })
    //根组件app2
    new Vue({
        el:"#app2",
        data:{msg:"xxx"}
    })
</script>
</html>